PROJECT OHNOLZA
2024-10-22
PROJECT OHNOLZA
프로젝트 OHNOLZA는 2023 패스트캠퍼스X야놀자 부트캠프에서 진행한 숙박업소 예약 서비스입니다. 클라이언트가 선택한 카테고리 별 숙소 검색하고 예약할 수 있는 서비스입니다.
My roles
FE팀장, 메인 페이지 구현, 검색 및 카테고리 별 숙박업체 리스팅
Dev period
2023.11.20 - 2023.11.30
Links
Frontend Tech Stack
Details
안녕하세요 프로젝트 OHNOLZA는 가상의 숙박예약 시스템입니다. 약 2주 간 빠르게 진행됐고, 프론트엔드와 백엔드의 협업을 통해 진행했습니다. 아쉽지만 현재 서버가 닫혀 실제로 프로젝트를 사용해 볼수는 없는 상태입니다. 시연영상을 통해 프로젝트를 간단히 확인해보실 수 있습니다.
해당 프로젝트의 프론트엔드 팀장으로 참여했습니다. 프론트엔드 팀장으로서 가장 중요한 것은 쾌적한 UX를 보장하는 것이었고, 이를 위해 충분한 개발 시간을 확보해야 한다고 판단했습니다. 따라서 저희 팀은 웹앱뷰를 채택하여 다양한 디바이스의 접속을 보장하고자 했고, 동시에 디자인 시간을 단축하여 효율적인 개발 경험을 보장하고자 했습니다. 또한 완성도 높고 빠른 UI 개발을 위해 디자인 라이브러리 CHAKRA-UI를 사용했습니다. 따라서 프론트엔드 팀이 보다 기능적인 측면에서 시간을 투자할 수 있었습니다.
React와 TypeScript를 사용했습니다. 초기 렌더링에는 불리하지만 Virtual DOM을 통한 빠른 UI 렌더링이 가능하다는 점, 컴포넌트 관리가 용이하다는 점을 유리하게 판단하여 React를 개발 프레임워크로 채택했습니다. 또한 타입 관련 오류를 예방하기 위해 TypeScript를 사용했습니다.
제가 중점적으로 맡은 기능은 메인페이지와 검색 화면 구현입니다. 카테고리 및 검색 필터를 통해 필요한 숙소 정보를 요청하는 로직을 구현했습니다. 쾌적한 UX를 위해 페이지의 뒤로가기, 새로고침 등의 이벤트에도 최근 검색 필터를 보장하는 것이 중요했습니다. 이를 위해 Recoil, Recoil-persist를 통해 검색 필터의 상태를 관리했습니다. 또한 검색필터 상태의 안정성을 보장해야 했습니다. 예컨데 클라이언트가 검색을 완료하지 않은 상태로 검색필터를 닫을 경우, 검색 필터가 업데이트되지 않은 상태로 유지되어야 합니다. 따라서 이를 보장하기 위해 검색요청의 회수를 상태로 관리했습니다. 검색요청의 회수가 업데이트 되지 않으면 검색필터 또한 이전 상태로 안정적으로 유지될 수 있도록 UX를 보장했습니다.
팀장으로서 책임감도 막중하게 느꼈던 프로젝트지만, 정말 재밌는 경험이었습니다. 덕분에 특정 기능에만 몰두하기 보다는 전체적으로 프로젝트를 바라보고, 주도적으로 커뮤니케이션을 경험할 수 있었습니다. 프론트엔드로서 어떻게 좋은 UX를 보장할 수 있을지 고민하게된 시작점이 된 프로젝트입니다. 또한 좋은 개발 경험을 위해서는 커뮤니케이션 보장되어야 한다는 점을 느끼게 해준 경험입니다.